<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script> 
<style type="text/css">
body {
	min-width: 580px;
}
#content {
	height:250px;
	width:45%;
	margin-left: 25%;
	margin-top: 100px;
}
#form_ul {
	list-style-type: none;
}
#form_ul label {
	width:50px;
}
#form_ul li {
	margin-top: 10px;
}
</style>
<script type="text/javascript">
$(function(){
	//表单提交事件
	$("#addOtBtn").click(function(){
		//验证输入信息是否完整
		if ($("#enumber").val()&&$("#ename").val()&&$("#starttime").datetimebox('getValue')&&$("#endtime").datetimebox('getValue')) {
			if ($("#describe").val().length>255) {
				$.messager.confirm('提示','描述超过字数限制',function(r){    
				    if (r){    
				    }    
				});
			} else {
				//获得输入的时间
				var starttime = new Date($("#starttime").datetimebox('getValue'));
				var endtime = new Date($("#endtime").datetimebox('getValue'));
				//判断结束时间是否大于开始时间
				var a = (endtime-starttime)/60000;
				if (a<0) {
					$.messager.confirm('提示','输入日期有误',function(r){    
					    if (r){    
					    }    
					});
				} else {
					//发送添加加班记录的请求
					$.ajax({
						url:'${pageContext.request.contextPath}/addOvertime',
						type:'post',
						data:$("#addOtForm").serialize(),
						dataType:'text',
						success:function(data){
							//添加失败
							if ("0" == data) {
								$.messager.confirm('提示','添加失败',function(r){    
								    if (r){    
								        $("#addOtForm").reset();    
								    }    
								});
							} else {
								//添加成功
								$.messager.confirm('提示','添加成功',function(r){    
								    if (r){    
								    	//获得‘查看加班记录’的tab
								    	var absentTab = top.$("#showTabs").tabs('getTab','查看加班记录');
								    	//‘查看加班记录’tab存在
								    	if (absentTab) {
								    		//跳转到‘查看加班记录’tab
								    		top.$("#showTabs").tabs('select','查看加班记录');
										} else {
											//‘查看加班记录’tab不存在 ，则新增
											top.$('#showTabs').tabs('add', {
												title : '查看加班记录',
												fit:true,
												content : "<iframe style='width: 100%;height: 100%'  src='${pageContext.request.contextPath}/overtime/findovertime.jsp'  frameborder='0'></iframe>",
												closable : true,
											});
											var li = top.$(".tabs-wrap ul li:last-child");
											top.$("#close").remove();
											li.after("<li id='close'><a class='tabs-inner' href='javascript:void()' onClick='javascript:closeAll()'>关闭全部</a></li>");
										}
									}
								});
							}
						}
					});
				}
			}
		} else {
			$.messager.confirm('提示','请输入完整信息',function(r){    
			    if (r){    
			    	
				}
			});
		}
	});
	//表单重置事件
	$("#reset").click(function(){
		$("#addOtForm").form('clear');
	});
	//添加信息pane创建
	$('#addPanel').panel({
		width:'100%',
		title: '添加加班记录',
	});
	
	//判断输入的员工编号是否存在
	$("input",$("#enumber").next("span")).blur(function(){
		$.ajax({
			url:'${pageContext.request.contextPath}/getEmpByEnum',
			type:'post',
			data:{'e_number':$("#enumber").textbox('getValue')},
			dataType:'json',
			success:function(data){
				//员工编号存在
				if (data!=null) {
					//设置几班记录的id
					$("#e_id").val(data.e_id);
					//设置员工姓名
					$("#ename").textbox('setValue',data.e_name);
					//设置员工姓名编辑框为不可编辑状态
					$("#ename").textbox('disable');
					//设置提交按钮为可点击状态
					$("#addOtBtn").removeProp("disabled");
				} else {
					//员工编号不存在
					//设置提交按钮为不可点击状态
					$("#addOtBtn").prop("disabled","true");
					$.messager.confirm('提示','员工号不存在，请重新输入',function(r){    
					    if (r){    
					    	$("#eeumber").textbox('setValue','');
					    }    
					});
					$("#ename").textbox('setValue','');
					$("#ename").textbox('enable');
				}
			}
		});
	});
});
</script>
</head>
<body>
	<div id="content">
		<div id="addPanel" style="padding:10px;">    
		    <form id="addOtForm" action="">
		    	<input type="hidden" id="e_id" name="e_id" value=""/>
		    	<ul id="form_ul">
		    		<li>
						<div>
							<label>员工号</label>
							<input type="text" class="easyui-textbox" id="enumber" name="e_number" data-options="prompt:'请输入员工号'" style="width:70%"> 
						</div>
		    		</li>
		    		<li>
						<div>
			    			<label>员工姓名</label>
							<input type="text" class="easyui-textbox" id="ename" name="e_name" style="width:70%"> 
						</div>
		    		</li>
		    		<li>
						<div>
			    			<label>加班时间</label>
							<input type="text" class="easyui-datetimebox" id="starttime" name="starttime" data-options="required:true" style="width:34%">~
							<input type="text" class="easyui-datetimebox" id="endtime" name="endtime" data-options="required:true" style="width:34%">
						</div>
		    		</li>
		    		<li>
						<div>
			    			<label>描述</label>
							<input type="text" class="easyui-textbox" name="describe" id="describe" data-options="multiline:true,prompt:'（限80字！！！）'" style="width:70%;height:60px;">
						</div>
		    		</li>
		    	</ul>
		    </form>
			<div style="margin-top: 20px;text-align: center;">
				<input type="button" id="addOtBtn" value="添加" style="width:100px;">
				<input type="button" id="reset" value="重置" style="width:100px;margin-left: 10px">
			</div>
		</div> 
	</div>
</body>
</html>